<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<style>
</style>
<script type="text/javascript">
    var myApplayDataGrid;
    $(function() {
        myApplayDataGrid = $('#myApplayDataGrid').datagrid({
            url : '${path}/process/activitiMonitorData?userid=${userid}',
            striped : true,
            rownumbers : true,
            pagination : true,
            singleSelect : true,
            idField : 'processInstanceId',
            sortName : 'processInstanceId',
            sortOrder : 'asc',
            pageSize : 15,
            pageList : [ 15, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
            columns : [ [
            	 {
                     width : '100',
                     title : '流程实例ID',
                     field : 'processInstanceId'
                 },
                {
                width : '200',
                title : '标题',
                field : 'title'
            },
            {
                width : '100',
                title : '流程类型',
                field : 'businessType'
            },  {
                    width : '100',
                    title : '审批状态',
                    field : 'status',
                    formatter:function(value,row,index){
                        switch(value){
                            case 1:
                                return '<span style="color:red;">审批中</span>'
                            case 3:
                                return '<span style="color:green;">审批通过</span>'
                            case 5:
                                return '审批失败'
                            case 9:
                                return '作废'
                        }
                    }
                },{
                width : '100',
                title : '发起人',
                field : 'userName'
            },
                {
                width : '100',
                title : '发起时间',
                field : 'startTime'
                ,formatter : function(value, row, index) {
                	return datetime2Str(value)
                 }
            },
            {
                width : '100',
                title : '结束时间',
                field : 'endTime'
                ,formatter : function(value, row, index) {
                	return datetime2Str(value)
                 }
            },{
                width : '100',
                title : '当前当前任务',
                field : 'taskName'
            }, {
                width : '100',
                title : '任务执行人',
                field : 'assigneeOrCandidateUser'
            }
              
            ]],
            frozenColumns : [ [{
                field : 'action',
                title : '操作',
                width : 370,
                formatter : function(value, row, index) {
                    var str = '';
                    str += $.formatString('<a href="javascript:void(0)" class="processInstanceMonitor-easyui-linkbutton-comment" data-options="plain:true,iconCls:\'fi-eye icon-green\'" onclick="queryHistoryCommentFun(\'{0}\');" >查看批注</a>', row.processInstanceId);
                      str += '&nbsp;&nbsp;|&nbsp;&nbsp;';
                    str += $.formatString('<a href="javascript:void(0)" class="processInstanceMonitor-easyui-linkbutton-operator" data-options="plain:true,iconCls:\'fi-check icon-green\'" onclick="queryOperatorRecordFun(\'{0}\');" >操作记录</a>', row.processInstanceId);
                      str += '&nbsp;&nbsp;|&nbsp;&nbsp;';
                    str += $.formatString('<a href="javascript:void(0)" class="processInstanceMonitor-easyui-linkbutton-view" data-options="plain:true,iconCls:\'fi-magnifying-glass\'" onclick="viewprocessInstanceMonitorFun(\'{0}\',\'{1}\');" >查看</a>', row.businessKey,row.processInstanceId);
                    if(row.status==1){
                        str += $.formatString('<a href="javascript:void(0)" class="processInstanceMonitor-easyui-linkbutton-set" data-options="plain:true,iconCls:\'fi-widget \'" onclick="setTaskAssignee(\'{0}\');" >设置任务执行人</a>', row.processInstanceId);
                    }
                    return str;
                }
            } ] ],
            onLoadSuccess:function(data){
                $('.processInstanceMonitor-easyui-linkbutton-comment').linkbutton({text:'历史批注'});
                $('.processInstanceMonitor-easyui-linkbutton-operator').linkbutton({text:'操作记录'});
                $('.processInstanceMonitor-easyui-linkbutton-view').linkbutton({text:'查看'});
                $('.processInstanceMonitor-easyui-linkbutton-set').linkbutton({text:'设置任务执行人'});
            },
        });
    });
	
    function viewprocessInstanceMonitorFun(businessKey,processInstanceId){
    	var title="查看";
		 var url="${ctxPath}/example/"+businessKey+"/view"+businessKey+"info/"+processInstanceId;
		  var dialog= $('<div>').dialog({
		        title:title,
		        href:url,
		        width : '80%',
		        height : '80%',
		        modal:true,
		        onClose : function() {
		            $(this).dialog('destroy');
		        },
		        buttons:[{
		            text:'关闭',
		            handler:function () {
		            	dialog.dialog('close');
		            }
		        }]
		  })
    }
    function queryHistoryCommentFun(processInstanceId){
    	var dialog=$('<div>').dialog({
            title : '查看历史批注',
            width : '80%',
            height : '80%',
            modal:true,
            onClose : function() {
		          $(this).dialog('destroy');
		      },
            href : '${path}/process/getCommentsByProcessInstanceId?processInstanceId='+processInstanceId,
            buttons : [ {
                text : '关闭',
                handler : function() {
                	dialog.dialog('close');
                }
            } ]
        });
    }
    function queryOperatorRecordFun(processInstanceId){
    	var dialog=$('<div>').dialog({
            title : '查看操作记录',
            width : '80%',
            height : '80%',
            modal:true,
            onClose : function() {
		          $(this).dialog('destroy');
		      },
            href : '${path}/task/queryOperatorRecords/'+processInstanceId,
            buttons : [ {
                text : '关闭',
                handler : function() {
                	dialog.dialog('close');
                }
            } ]
        });
    }

    function searchmyApplayDataGrid() {
    	myApplayDataGrid.datagrid('load', $.serializeObject($('#searchprocessInstanceMyapplay')));
    }
    function cleanmyApplayDataGrid() {
        $('#searchprocessInstanceMyapplay')[0].reset();
       myApplayDataGrid.datagrid('load', {});
    }
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
<div data-options="region:'north',border:true,title:''" style="overflow: hidden;background-color: #fff;">
        <form id="searchprocessInstanceMyapplay" >
            <table>
                <tr>
              <td>审批状态</td>
			  <td>
				<select name="status" class="easyui-text" >
					<option value="">请选择</option>
					<option value="1">审批中</option>
					<option value="3">审批通过</option>
					<option value="5">审批失败</option>
					<option value="9">作废</option>
				</select>
			 </td>
              <td>标题</td>
			  <td>
				<input name="title"   type="text" placeholder="请输入标题" class="easyui-text  span2" >
			 </td>
			<td>流程发起时间</td>
			<td>
				<input name="startTimeStart"  type="text"  class="easyui-text easyui-datebox  span2">
				~<input name="startTimeEnd"  type="text"  class="easyui-text easyui-datebox  span2">
			</td>

			 </tr>
			 <tr>
			 <td>流程类型</td>
			 <td>
			 	<%-- <select name="businessKey" class="easyui-text" style="height:28px;width:140px">
			 		<option value="">请选择</option>
			 		<c:forEach var="processType" items="${processTypes}">
			 			<option value="${processType.key }">${processType.name }</option>
			 		</c:forEach> 
			 	</select> --%>
			 	<input type="hidden" name="businessKey" id="taskmonitor_businessKey"/>
			 	<input type="text" name="businessType" class="easyui-text" id="taskmonitor_businessKey_disp" 
			 	 onfocus="selectProcessType(false,'taskmonitor_businessKey','taskmonitor_businessKey_disp')"/>
			 </td>
			 <td>流程实例ID</td>
			 <td>
				 <input name="processInstanceId"   type="text" placeholder="请输入流程实例ID" class="easyui-text  span2" >
			 </td>


			<td>
			  <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-magnifying-glass',plain:true" onclick="searchmyApplayDataGrid();">查询</a>
			<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-x-circle',plain:true" onclick="cleanmyApplayDataGrid();">清空</a>
			</td></tr>

            </table>
        </form>
    </div>
    <div data-options="region:'center',border:true,title:''">
        <table id="myApplayDataGrid" data-options="fit:true,border:false"></table>
    </div>
</div>
